<template>
	<view>
		<view class="tag_container_box">
			<view class="con_header">
				<view class="brief">
					<view>{{state?"喜欢的类型":"关于自己"}} {{state?checkFondNum:checkNum}}/8</view>
					<view>{{state?"选择自己喜欢的特质":"选择最符合自己的标签"}}</view>
				</view>
				<view class="perform" @click="headleFinish">完成</view>
			</view>

			<view>
				<view class="tag_container" v-if="!state">
					<view v-for="(item,index) in tagList" :key="item.id" @click="headleTag(index)"
						:class="{'activetag':item.state}">{{item.name}}</view>
				</view>
				<view class="tag_container" v-else>
					<view v-for="(item,index) in tagFontList" :key="item.id" @click="headleTag(index)"
						:class="{'activetag':item.state}">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//喜欢类型标签数组
			tagFontList: {
				type: Array,
				default: []
			},
			//关于自己标签数组
			tagList: {
				type: Array,
				default: []
			},
			//判断关于自己或喜欢类型
			state: {
				type: Number,
				default: 0
			},
			//喜欢类型选中标签数量
			checkNum: {
				type: Number,
				default: 0
			},
			//喜欢类型选中标签数量
			checkFondNum: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {

			}
		},
		mounted() {
	
		},
		methods: {
			//子传父选中的标签
			headleTag(index) {
				this.$emit('headleTag', index)
			},
			// 子传父完成选中标签
			headleFinish() {
				this.$emit('headleFinish')
			}
		}
	}
</script>

<style lang="scss">
	/* 标签容器 */
	.tag_container_box {
		padding: 40upx 20upx 40upx 40upx;
		box-sizing: border-box;

		.con_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: rgba(0, 0, 0, 0.35);
			font-size: 26upx;
			padding-bottom: 30upx;
			border-bottom: 2upx dashed #ccc;
			margin-right: 20upx;

			.perform {
				width: 120upx;
				height: 60upx;
				line-height: 60upx;
				border-radius: 200upx;
				color: rgba(130, 113, 239, 100);
				font-size: 28upx;
				text-align: center;
				border: 2upx solid rgba(130, 113, 239, 100);
			}
		}

		.brief view:first-child {
			color: rgba(0, 0, 0, 0.8);
			font-size: 36upx;
			margin-bottom: 4upx;
			font-weight: 600;
		}
	}

	.tag_container {
		margin: 40upx 0upx;
		display: flex;
		flex-wrap: wrap;

		view {
			width: auto;
			height: 64upx;
			line-height: 64upx;
			font-size: 28upx;
			color: #AA95ED;
			margin: 0upx 20upx 30upx 0upx;
			background-color: #F5F4FD;
			border-radius: 200upx;
			padding: 0upx 30upx;
		}

		/* 选中的标签 */
		.activetag {
			background-color: rgba(130, 113, 239, 100);
			color: #fff;
			font-weight: 600;
		}
	}
</style>
